import React,{useState,useEffect} from 'react'
import MyHeader from '../../components/header/MyHeader'
import Input from '../../components/input/Input'
import style from './style.module.scss'
import api from '../../api/index'
import {useSelector} from 'react-redux'
import HotHouse from '../../components/hotHouse/HotHouse'
import LoadMore from '../../components/loadMore/LoadMore'
export default function Search() {
  let flag=true;//开关
  //定义房源列表容器
  let [list,setList] = useState([])
  const [msg,setMsg] = useState('')
  const [val,setVal] = useState('')
  let [page,setPage] = useState(0)
  //获取store仓库的数据城市名称
  const cityname = useSelector(store=>store.city.cityname)
    //搜索功能------定义函数接受子组件传递的数据-------------------
    function getInputVal(val){
        console.log(val);
        if(val.trim()==''){
          setList([])
          setMsg('查无数据')
          return;
        }
        //清空数据--- list  page 
        page=0;
        list=[];
        setList([])
        setPage(0)
        //存储val的值  -- 下拉加载更多数据
        setVal(val)
        //请求接口
        http(val);
    }
    //下拉加载更多数据
    function scrollFun(){
      //滚动的高度
      const height = document.documentElement.scrollTop;
      //窗口的高度 
      const winHeight = document.documentElement.clientHeight;
      // 文档的高度
      const domHeight =  document.body.clientHeight;
      // console.log(height,winHeight,domHeight);
      //窗口的高度  +  滚动的高度 +10 >=文档的高度
      if(height+winHeight +50 >= domHeight && flag){
        flag=false;//开关关闭
        //请求接口
        http(val,page)
      } 
     }

    //获取房源信息----封装请求函数--------------
   async function http(val,page=0){
    console.log('-------------http---------------------');
      //查询数据
     let res = await api.getSearch({
        city:cityname,
        val,
        page
      })
      //数据追加显示---
      //拼接数据 拿默认list容器老数据 + 新请求的数据  
      console.log('---page----',page,list);//请求http() list上一次的结果 
      if(page==0){//默认搜索功能
        setList(res.data.list)
      }else{
        console.log([...list,...res.data.list]);
        //后端接口模拟的 id=200 
        setList([...list,...res.data.list])
        //开关打开
        flag=true;
      }
      //修改page 
      setPage(page+1)
      setMsg('')
    }
  return (
    <div>
        {/* 公共的顶部区域 */}
        <MyHeader>
           <div className={style.container}><Input getInputVal={getInputVal} /></div>
        </MyHeader>
        {/* 搜索的视图内容 */}
        <div>
          <HotHouse list={list}/>
          {msg}
        </div>
        {/* 加载更多数据 */}
        <LoadMore page={page} getData={http} val={val}/>


    </div>
  )
}
